<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
<!--            学生数据行，数据行的多少取决于stu模型的数据容量
                v-for="自定义变量名 in 需要遍历的模型变量"

                v-for="(自定义变量名-接收遍历到的元素,自定义变量-接收索引) in 需要遍历的模型变量"
-->
            <tr v-for="stu in stus">
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>

        <hr>
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <!--            学生数据行，数据行的多少取决于stu模型的数据容量
                            v-for="自定义变量名 in 需要遍历的模型变量"

                            v-for="(自定义变量名-接收遍历到的元素,自定义变量-接收索引) in 需要遍历的模型变量"
            -->
            <tr v-for="(stu,idx) in stus">
                <td>{{idx+1}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.gender}}</td>
            </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            stus:[
                {name:"zs1",age:18,gender:"男"},
                {name:"zs2",age:28,gender:"男"},
                {name:"zs3",age:38,gender:"男"},
                {name:"zs4",age:48,gender:"男"}
            ]
        },
        //定义vue对象的行为
        methods:{

        }
    });

</script>

</html>